<template>
	<view>
		<uni-nav-bar title="个人资料" left-icon="back" @clickLeft="$tab.back()" :border="false" :fixed="true"
			:statusBar="true"></uni-nav-bar>

		<view class="bg-FFF px-32 py-32 mt-16">
			<view class="nav flex flex-col items-center">
				<view class="relative" @click="$tab.nav(`/pages/mine/avatar/index`)">
					<image :src="userInfo.avatar" class="image-144 round" mode=""></image>
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_xiangji.png"
						class="image-xiangji" mode=""></image>
				</view>

				<view class="flex items-center" style="margin-top: 80rpx;">
					<view class="box-2 text-center" :class="{
						'box-1':userInfo.sex == 0
					}" @click="userInfo.sex = 0">
						男生
					</view>
					<view class="box-2 text-center ml-48" :class="{
						'box-1':userInfo.sex == 1
					}" @click="userInfo.sex = 1">
						女生
					</view>
				</view>
			</view>

			<view class="text-28 flex items-center justify-between mt-24">
				<view class="">
					昵称
				</view>
				<input type="text" class="text-right text-28" v-model="userInfo.nickName" />
			</view>
			<u-divider></u-divider>
			<view class="text-28 flex items-center justify-between mt-24">
				<view class="">
					个性签名
				</view>
				<input type="text" class="text-right text-28" v-model="userInfo.signature" />
			</view>
			<u-divider></u-divider>
			<view class="text-28 flex items-center justify-between mt-24">
				<view class="">
					手机号
				</view>
				<view class="text-gray">
					{{userInfo.phonenumber}}
				</view>
			</view>
			<u-divider></u-divider>
			<!-- 	<view class="text-28 flex items-center justify-between mt-24">
				<view class="">
					上级用户
				</view>
				<view class="text-gray" v-if="superUser">
					{{superUser.userName}}
				</view>
			</view>
			<u-divider></u-divider> -->
			<view class="text-28 flex items-center justify-between mt-24">
				<view class="">
					邀请码
				</view>
				<view class="text-gray">
					{{userInfo.inviteCode}}
				</view>
			</view>
			<u-divider></u-divider>
			<view class="text-28 flex items-center justify-between mt-24" @click="$tab.nav(`/pages/mine/myQrCode`)">
				<view class="">
					二维码名片
				</view>
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_erweima@2x.png" class="image-48" mode=""></image>
			</view>
		</view>


		<bottom-btn txt="确认修改" @click="modify"></bottom-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				superUser: null,
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo
			},
		},
		onLoad() {
			this.$store.dispatch('GetInfo').then(res => {
				this.superUser = res.superUser
			})
		},
		methods: {
			modify() {
				this.$modal.confirm('确认修改吗?').then(async con => {
					if (con) {
						this.$Api.user.updateUserInfo({
							nickName: this.userInfo.nickName,
							sex: this.userInfo.sex,
							signature:this.userInfo.signature
						}).then(res => {
							this.$store.dispatch('GetInfo').then(u => {
								this.$modal.msg('修改成功!')
								this.$tab.back(1500)
							})
						})
					}
				})
			},
			goPassword(e) {
				this.$tab.nav(`/pages/mine/setting/paymentPassword?isPayPassword=${e}`)
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFF;
	}
</style>

<style lang="scss">
	.confirm {
		background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
	}

	.nav {
		padding: 60rpx 0;

		.box-2 {
			width: 192rpx;
			height: 72rpx;
			background: #E2E2E2;
			border-radius: 70rpx 70rpx 70rpx 70rpx;
			line-height: 72rpx;
			color: #7C7C7C;
		}

		.box-1 {
			width: 192rpx;
			height: 72rpx;
			background: linear-gradient(90deg, #FF1306 0%, #FF9734 100%);
			border-radius: 39rpx 39rpx 39rpx 39rpx;
			border: 2rpx solid #FFF41D;
			line-height: 72rpx;
			color: #FFF;
		}

		.image-xiangji {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 1;
		}
	}
</style>